<template>
  <div>
    <div>
      <!-- 头部 -->
      <div class="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="工单编号:">
            <el-input
              v-model="formInline.taskCode"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="工单状态:">
            <el-select v-model="formInline.status" placeholder="请选择">
              <el-option label="代办" value="1"></el-option>
              <el-option label="进行" value="2"></el-option>
              <el-option label="取消" value="3"></el-option>
              <el-option label="完成" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 内容 -->
      <div class="result">
        <!-- 两个按钮 -->
        <div class="heand">
          <!-- 新建 -->
          <el-button
            type="warning"
            size="medium"
            icon="el-icon-circle-plus-outline"
            @click="newCardAA"
            class="new"
            >新建</el-button
          >
          <!-- 新增工单弹窗 -->
          <el-dialog title="新增工单" :visible.sync="newCard">
            <el-form
              class="form"
              :rules="formRules"
              ref="form"
              :model="form"
              width="200px"
            >
              <el-form-item prop="innerCode" label="设备编号">
                <el-col :span="19">
                  <el-input
                    @input="changeInnerCode"
                    size="medium"
                    maxlength="15"
                    placeholder="请输入"
                    show-word-limit
                    v-model="form.innerCode"
                  ></el-input>
                </el-col>
              </el-form-item>
              <el-form-item prop="assignorId" label="工单类型">
                <el-select
                  size="medium"
                  class="a1"
                  v-model="form.region"
                  placeholder="请选择"
                >
                  <el-option label="补货工单" value="shanghai"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="assignorId" label="补货数量">
                <el-button
                  @click="goodsList = true"
                  type="text"
                  icon="el-icon-edit-outline"
                  >补货清单</el-button
                >
              </el-form-item>
              <el-form-item prop="assignorId" label="运营人员">
                <el-select
                  size="medium"
                  class="a1"
                  v-model="form.assignorId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in people"
                    :key="item.userId"
                    :label="item.userName"
                    :value="+item.userId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="desc" label="活动名称">
                <el-col :span="19">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 8 }"
                    maxlength="40"
                    placeholder="请输入"
                    show-word-limit
                    v-model="form.desc"
                  ></el-input>
                </el-col>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button class="btn" @click="newCard = false">取 消</el-button>
              <el-button class="btn" type="primary" @click="newCardA"
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <!-- 补货清单弹窗 -->
          <el-dialog title="补货清单" :visible.sync="goodsList">
            <template>
              <el-table class="newForm" :data="channelList" height="330px">
                <el-table-column prop="channelCode" label="货到编号">
                </el-table-column>
                <el-table-column label="商品名称">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.skuName ? scope.row.skuName : "-"
                    }}</span>
                  </template>
                </el-table-column>
                <template v-if="isReplenish">
                  <el-table-column label="当前数量">
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.skuName ? scope.row.currentCapacity : "-"
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="还可添加">
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.skuName ? scope.row.maxCapacityL : "-"
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="补满数量" width="200px">
                    <template slot-scope="scope">
                      <el-input-number
                        v-if="scope.row.skuName"
                        v-model="scope.row.expectCapacity"
                        controls-position="right"
                        size="small"
                        :min="1"
                        :max="scope.row.maxCapacityL"
                        weight="150"
                      ></el-input-number>
                      <span v-else>货道暂无商品</span>
                    </template>
                  </el-table-column></template
                >
                <template v-else>
                  <el-table-column label="补货数量">
                    <template slot-scope="scope">
                      <span>{{ scope.row.expectCapacity }}</span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
              <template>
                <div slot="footer" class="dialog-footer">
                  <el-button class="btn" @click="goodsList = false"
                    >取 消</el-button
                  >
                  <el-button class="btn" type="primary" @click="goodsListA"
                    >确 定</el-button
                  >
                </div>
              </template>
            </template>
          </el-dialog>
          <!-- 工单配置 -->
          <el-button plain size="medium" @click="workCardLast"
            >工单配置</el-button
          >
          <!-- 工单配置弹窗 -->
          <el-dialog title="工单配置" :visible.sync="workCard">
            <el-form label-width="100px" class="demo-ruleForm">
              <el-form-item
                class="config"
                label="补货警戒线："
                label-width="200"
                :rules="[{ required: true, message: '不能为空' }]"
              >
                <el-input-number
                  style="width: 70%"
                  v-model="configNumber"
                  controls-position="right"
                  :max="100"
                  :min="1"
                ></el-input-number> </el-form-item
            ></el-form>
            <div slot="footer" class="dialog-footer">
              <el-button class="pink" @click="workCard = false"
                >取 消</el-button
              >
              <el-button class="orange" type="primary" @click="workCardLast"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </div>
        <!-- 主题内容 -->
        <div class="body">
          <template>
            <!-- 列表 -->
            <el-table :data="tableData" size="small" style="width: 100%">
              <el-table-column label="序号" width="80px">
                <template slot-scope="scop">
                  {{ pageIndex * 10 + scop.$index + 1 - 10 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="taskCode"
                label="工单编号"
              ></el-table-column>
              <el-table-column prop="innerCode" label="设备编号">
              </el-table-column>
              <el-table-column prop="taskType.typeName" label="工单类型">
              </el-table-column>
              <el-table-column label="工单方式"> 手动 </el-table-column>
              <el-table-column
                prop="taskStatusTypeEntity.statusName"
                label="工单状态"
              >
              </el-table-column>
              <el-table-column prop="userName" label="运营人员">
              </el-table-column>
              <el-table-column prop="createTime" label="创建日期">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="ReplenishmentListA(scope.row)"
                    type="text"
                    size="small"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="title">
              <span class="text"
                >共 {{ total }} 条记录 第{{ pageIndex }}/{{ totalPage }}页</span
              >
              <div class="pageChange">
                <el-button size="small" :disabled="disabled" @click="pageUp"
                  >上一页</el-button
                >
                <el-button size="small" @click="pageDown">下一页</el-button>
              </div>
            </div>
          </template>
        </div>
        <!-- 弹窗 -->
        <el-dialog title="补货清单" :visible.sync="ReplenishmentList">
          <!-- 取消  -->
          <div
            class="no"
            v-show="
              Replenishment.taskStatusTypeEntity
                ? Replenishment.taskStatusTypeEntity.statusName === '取消'
                  ? true
                  : false
                : ''
            "
          >
            <img
              class="icon"
              src=""
              alt=""
            />
            <span class="status">取消</span>
            <img
              class="img"
              src="http://likede2-admin.itheima.net/img/pic_3.e8208e34.png"
              alt=""
            />
          </div>
          <!-- 待办 -->
          <div
            class="no"
            v-show="
              Replenishment.taskStatusTypeEntity
                ? Replenishment.taskStatusTypeEntity.statusName === '待办'
                  ? true
                  : false
                : ''
            "
          >
            <img
              class="icon"
              src=""
              alt=""
            />
            <span class="status">待办</span>
            <img
              class="img"
              src="http://likede2-admin.itheima.net/img/pic_1.834b274c.png"
              alt=""
            />
          </div>
          <!-- 完成  -->
          <div
            class="no"
            v-show="
              Replenishment.taskStatusTypeEntity
                ? Replenishment.taskStatusTypeEntity.statusName === '完成'
                  ? true
                  : false
                : ''
            "
          >
            <img
              class="icon"
              src=""
              alt=""
            />
            <span class="status">完成</span>
            <img
              class="img"
              src="http://likede2-admin.itheima.net/img/pic_4.3b5af41c.png"
              alt=""
            />
          </div>
          <!-- 进行  -->
          <div
            class="no"
            v-show="
              Replenishment.taskStatusTypeEntity
                ? Replenishment.taskStatusTypeEntity.statusName === '进行'
                  ? true
                  : false
                : ''
            "
          >
            <img
              class="icon"
              src=""
              alt=""
            />
            <span class="status">取消</span>
            <img
              class="img"
              src="http://likede2-admin.itheima.net/img/pic_3.e8208e34.png"
              alt=""
            />
          </div>
          <div class="ReplenishmentBody">
            <el-form label-width="100px" class="demo-ruleForm">
              <el-row>
                <el-col :span="12"
                  ><div>
                    设备编号:
                    <span style="padding-left: 20px">{{
                      Replenishment.innerCode
                    }}</span>
                  </div></el-col
                >
                <el-col :span="12"
                  ><div>
                    创建日期 :
                    <span style="padding-left: 20px">{{
                      Replenishment.createTime
                    }}</span>
                  </div></el-col
                >
                <el-col :span="12"
                  ><div>
                    取消日期 :
                    <span style="padding-left: 20px">{{
                      Replenishment.updateTime
                    }}</span>
                  </div></el-col
                >
                <el-col :span="12"
                  ><div>
                    运营人员 :
                    <span style="padding-left: 20px">{{
                      Replenishment.userName
                    }}</span>
                  </div></el-col
                >
                <el-col :span="12"
                  ><div>
                    工单类型 :
                    <span style="padding-left: 20px">{{
                      Replenishment.taskType
                        ? Replenishment.taskType.typeName
                        : ""
                    }}</span>
                  </div></el-col
                >
                <el-col :span="12" style="display: flex"
                  ><div>补货数量</div>
                  <span style="color: skyblue; margin-left: 30px" @click="Fn"
                    >补货详情</span
                  ></el-col
                >
                <el-col :span="12"
                  ><div>
                    工单方式 : <span style="padding-left: 20px">手动</span>
                  </div></el-col
                >
                <el-col :span="12"
                  ><div>
                    备注 :
                    <span style="padding-left: 20px">{{
                      Replenishment.desc
                    }}</span>
                  </div></el-col
                >
              </el-row>
            </el-form>
          </div>
          <div
            v-show="
              Replenishment.taskStatusTypeEntity
                ? Replenishment.taskStatusTypeEntity.statusName === '完成'
                  ? false
                  : true
                : ''
            "
            slot="footer"
            class="dialog-footer"
          ></div>
          <!-- 取消订单 -->
          <div
            v-show="
              Replenishment.taskStatusTypeEntity
                ? Replenishment.taskStatusTypeEntity.statusName === '取消'
                  ? true
                  : false
                : ''
            "
            slot="footer"
            class="dialog-footer"
          >
            <el-button class="orange" type="primary" @click="newCardNew"
              >重新创建</el-button
            >
          </div>
          <div
            v-show="
              Replenishment.taskStatusTypeEntity
                ? Replenishment.taskStatusTypeEntity.statusName === '待办'
                  ? true
                  : false
                : ''
            "
            slot="footer"
            class="dialog-footer"
          >
            <el-button class="orange" type="primary" @click="cancelWork"
              >取消工单</el-button
            >
          </div>
        </el-dialog>
        <el-dialog title="补货详情" :visible.sync="dialogVisibleCC" width="45%">
          <template>
            <el-table :data="Listt" height="250" border style="width: 100%">
              <el-table-column prop="channelCode" label="货到编号" width="180">
              </el-table-column>
              <el-table-column prop="skuName" label="商品" width="180">
              </el-table-column>
              <el-table-column prop="expectCapacity" label="补货数量">
              </el-table-column>
            </el-table>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  workList,
  workSearch,
  workPeopleList,
  channelList,
  newWork,
  supplyAlertValue,
  autoSupplyConfig,
  cancelWorkA,
  taskDetails
} from '@/api/user.js'

export default {
  computed: {
    disabled () {
      if (this.pageIndex < 2) {
        return true
      } else {
        return false
      }
    }
  },
  watch: {
    'form.innerCode' () {
      if (this.form.innerCode) {
        clearTimeout(this.timer)
        this.timer = setTimeout(async () => {
          this.changeInnerCode()
          console.log(this.people)
        }, 300)
      }
    }
  },
  methods: {
    async Fn () {
      this.dialogVisibleCC = true
      const { data } = await taskDetails(this.Replenishment.taskId)
      this.Listt = data
      console.log(this.Listt)
    },
    newCardNew () {
      this.newCardAA()
      this.form.innerCode = this.Replenishment.innerCode
    },
    async newCardAA () {
      this.newCard = !this.newCard
      this.$refs.form.resetFields()
    },
    cancelWork () {
      this.$confirm('确定要取消吗')
        .then(() => {
          const data = {}
          data.taskId = this.Replenishment.taskId
          data.desc = this.Replenishment.desc
          console.log(data)
          cancelWorkA(data) // 返回promise对象
        })
        .then(() => {
          this.getlist(1)
          //  如果删除成功了  就会进入这里
          this.ReplenishmentList = false
        })
    },
    ReplenishmentListA (row) {
      this.ReplenishmentList = true
      console.log(row)
      this.Replenishment = row
    },
    async workCardLast () {
      this.workCard = !this.workCard
      if (this.workCard === true) {
        const { data } = await supplyAlertValue()
        this.configNumber = data
      } else if (this.workCard === false) {
        await autoSupplyConfig(this.configNumber)
      }
    },
    async newCardA () {
      // this.newCard = !this.newCard

      this.form.details = this.channelListLast
      await this.$refs.form.validate()

      await newWork(this.form).catch((err) => {
        if (err.response.status === 500) {
          console.log(err.response.data)
          this.$message(err.response.data)
        }
      })
      this.newCard = false
    },
    goodsListA () {
      this.goodsList = false
      // console.log(this.channelList)
      this.channelListLast = this.channelList.map((item) => ({
        channelCode: item.channelCode,
        skuName: item.skuName,
        skuImage: item.skuImage,
        skuId: item.skuId,
        currentCapacity: item.currentCapacity,
        expectCapacity: item.expectCapacity
      }))
      console.log(this.channelListLast)
    },
    handleChange (i, b) {
      if (i + 1) {
        return b + 1
      }
    },
    async changeInnerCode () {
      const { data } = await workPeopleList(this.form.innerCode)
      this.people = data
      console.log(this.people)
      const res = await channelList(this.form.innerCode)
      this.channelList = res.data
        .filter((item) => item.sku)
        .map((item) => ({
          channelCode: item.channelCode,
          skuName: item.sku && item.sku.skuName,
          skuImage: item.sku && item.sku.skuImage,
          skuId: item.sku.skuId,
          currentCapacity: item.currentCapacity,
          maxCapacityL: item.maxCapacity,
          expectCapacity: item.maxCapacity - item.currentCapacity
        }))
    },
    async onSubmit () {
      const { data } = await workSearch(this.formInline)
      this.tableData = data.currentPageRecords
      console.log(this.tableData)
      this.formInline = {
        taskCode: '',
        status: ''
      }
    },
    pageUp () {
      this.getlist(this.pageIndex - 1)
    },
    pageDown () {
      this.getlist(+this.pageIndex + 1)
    },
    async getlist (id) {
      const { data } = await workList(id)
      this.tableData = data.currentPageRecords
      this.total = data.totalCount
      this.pageIndex = data.pageIndex
      this.totalPage = data.totalPage
    }
  },
  name: 'ArticleIndex',
  data () {
    return {
      dialogVisibleCC: false,
      Listt: [],
      ReplenishmentList: false,
      isReplenish: true,
      num: 10,
      formInline: {
        taskCode: '',
        status: ''
      },
      Replenishment: '',
      workCard: false,
      channelList: [],
      channelListLast: [],
      people: [],
      goodsList: false,
      newCard: false,
      formRules: {
        innerCode: [
          { required: true, message: '编号要记得填哦', trigger: 'blur' }
        ],
        desc: [{ required: true, message: '备注要记得写哦', trigger: 'blur' }],
        assignorId: [{ required: true, trigger: 'blur' }]
      },
      form: {
        assignorId: '',
        createType: 1,
        innerCode: '',
        userId: 1,
        productType: '',
        desc: '',
        details: []
      },
      configNumber: '',
      // formLabelWidth: '120px',
      tableData: [],
      total: 0,
      pageIndex: 1,
      totalPage: ''
      // disabled: false
    }
  },
  async created () {
    const { data } = await workList()
    this.tableData = data.currentPageRecords
    this.total = data.totalCount
    this.pageIndex = data.pageIndex
    this.totalPage = data.totalPage
  }
}
</script>

<style lang="scss" scoped>
.no {
  // display: flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 54px;
  margin-bottom: 25px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  .img {
    margin-right: 60px;
  }
  .icon {
    margin-left: 15px;
  }
  span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.85);
  }
}
::v-deep [data-v-5b5b10cc] .el-dialog__body {
  padding: 20px 30px;
}
.a1 {
  width: 79%;
}
::v-deep .el-dialog {
  border-radius: 25px;
  width: 40%;
  // height: 530px;
}
::v-deep .el-col {
  height: 38px;
  // padding: 15px;
}
::v-deep .el-dialog__body {
  padding: 30px 60px;
}
.new {
  margin-right: 10px;
}
.title {
  padding-top: 20px;
  display: flex;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  .text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 16px !important;
    color: #dbdfe5 !important;
  }
  .pageChange {
    margin-right: 90px;
  }
}
.search {
  display: flex;
  height: 64px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
  .demo-form-inline {
    padding-top: 30px;
  }
}
</style>
